/**
 * Shopware 4.0
 * Copyright © 2012 shopware AG
 *
 * According to our dual licensing model, this program can be used either
 * under the terms of the GNU Affero General Public License, version 3,
 * or under a proprietary license.
 *
 * The texts of the GNU Affero General Public License with an additional
 * permission and of our proprietary license can be found at and
 * in the LICENSE file you have received along with this program.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * "Shopware" is a registered trademark of shopware AG.
 * The licensing of the program under the AGPLv3 does not imply a
 * trademark license. Therefore any rights, title and interest in
 * our trademarks remain entirely with us.
 *
 * @category   Shopware
 * @package    Shopware_Styling
 * @subpackage Buttons
 * @copyright  Copyright (c) 2012, shopware AG (http://www.shopware.de)
 * @version    $Id$
 * @author shopware AG
 */

/**
 * Shopware Main Menu Toolbar Buttons
 * -----------------------------------------------------------------------
 */
.shopware-menu {

    // Normal state
	.#{$prefix}btn-default-toolbar-small {
		@include border-radius(0);
		@include single-box-shadow(transparent, 0, 0, 0);
		-webkit-transition: none;
		-moz-transition: none;
		-ms-transition: none;
		-o-transition: none;
		transition: none;
		background: theme-image($theme, 'nav_taskbar_top_left.png') no-repeat 0 0;
        padding: 0 0 0 4px;
		height: $menu-button-height;
		border: 0 none;

		em {
			padding: 0 4px 0 0;
			display: block;
			height: $menu-button-height;
			background: theme-image($theme, 'nav_taskbar_top_right.png') no-repeat right 0;
		}

		button {
		    @include box-sizing('content-box');
			height: $menu-top-button-height;
			background: theme-image($theme, 'nav_taskbar_top_mid.png') repeat-x 0 0;

			.x-btn-inner {
				height: $menu-top-button-height;
				line-height: $menu-top-button-line-height;
				color: $menu-top-button-color;
				font-size: $menu-top-button-font-size;
				text-shadow: 1px 1px 0px #fff;
				padding: 0 0px 0 30px !important;
	            margin: -1px 10px 0 0;
	            font-size: 11px;
	            font-weight: normal;
			}
			.x-btn-icon {
			    @include box-sizing('border-box');
				width: 18px;
				height: 18px;
				left: 8px;
	            top: 7px;

				&.question_frame {
					left: 12px;
				}
			}
		}
		
		.icon-feedback {
			background: url("") no-repeat;
			width: 22px !important;
		}


	}

	// Active button state
	.#{$prefix}btn-default-toolbar-small-menu-active {
        background: theme-image($theme, 'nav_taskbar_top_left_active.png') no-repeat 0 0;

        em {
            background: theme-image($theme, 'nav_taskbar_top_right_active.png') no-repeat right 0;
        }

        button {
            background: theme-image($theme, 'nav_taskbar_top_mid_active.png') repeat-x 0 0;
        }
    }
}

/**
 * Shopware Footer Toolbar Buttons
 * -----------------------------------------------------------------------
 */
.shopware-footer {

    // Normal state
	.#{$prefix}btn-default-toolbar-small {
		@include border-radius(0);
		-webkit-box-shadow: transparent 0 0 0 !important;
		-moz-box-shadow: transparent 0 0 0 !important;
		-ms-box-shadow: transparent 0 0 0 !important;
		box-shadow: transparent 0 0 0 !important;
		background: theme-image($theme, 'btn_taskbar_cap_left.png') no-repeat 0 0;
		border: 0 none;
		padding: 0;
		height: 28px;
		padding: 0 0 0 4px;
		position: relative;

		em {
			display: block;
			height: 28px;
			line-height: 28px;
			padding: 0 4px 0 0;
			background: theme-image($theme, 'btn_taskbar_cap_right.png') no-repeat right 0;
		}
		button {
		    @include box-sizing('content-box');
            width: 28px;
			height: 28px;
			line-height: 28px;
			background: theme-image($theme, 'btn_taskbar_cap_mid.png') repeat-x 0 0;

			.#{$prefix}btn-inner {
				color: #324552 !important;
				font-size: 11px;
				text-shadow: 1px 1px 1px #fff !important;
			}

			.#{$prefix}btn-icon {
				width: 28px;
				height: 18px;
				bottom: auto;
				top: 4px;
			}
		}

		// Icons
		.logout {
			background: theme-image($theme, 'icon_taskbar_cap_logout.png') no-repeat center center;
		}
		.window-managment {
			background: theme-image($theme, 'icon_taskbar_cap_fenster.png') no-repeat center center;
		}
		.widget-sidebar {
			background-image: url('');
			background-position: center center;
		}
	}

	// Active state
	.btn-over, .#{$prefix}btn-default-toolbar-small-menu-active {
		background: theme-image($theme, 'btn_taskbar_cap_left_active.png') no-repeat 0 0;

		em {
			background: theme-image($theme, 'btn_taskbar_cap_right_active.png') no-repeat right 0;
		}

		button {
			background: theme-image($theme, 'btn_taskbar_cap_mid_active.png') repeat-x 0 0;
		}
		.window-managment {
			background: theme-image($theme, 'icon_taskbar_cap_fenster_active.png') no-repeat center center;
		}
		.widget-sidebar {
			background-image: url('');
		}
	}
}

/**
 * Shopware Footer - Window Management button
 * -----------------------------------------------------------------------
 */
.window-management-holder {
    overflow: visible !important;

    .footer-btn {
        margin: 0 6px;
    }

    .#{$prefix}btn-default-small {
        @include border-radius(2px);
        @include single-transition(none, 0s, linear);
        @include single-box-shadow(transparent, 0, 0);
        top: 2px;
        border: 0 none;
        padding: 0 0 0 4px;
        background: theme-image($theme, 'btn_taskbar_cap_left.png') no-repeat 0 0;
        -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
		-moz-transition: box-shadow linear 0.2s;
		-ms-transition: box-shadow linear 0.2s;
		-o-transition: box-shadow linear 0.2s;
		transition: box-shadow linear 0.2s;

		em {
			display: block;
			padding: 0 4px 0 0;
			background: theme-image($theme, 'btn_taskbar_cap_right.png') no-repeat right 0;
		}
        button {
			height: 27px;
			background: theme-image($theme, 'btn_taskbar_cap_mid.png') repeat-x 0 0;
		}

		// Button text
        .#{$prefix}btn-inner {
            padding-left: 6px;
            padding-right: 18px;
            font-size: 11px;
            font-weight: normal;
        }
        .#{$prefix}btn-icon {
            left: auto;
            right: 0px;
            top: 7px;
            width: 14px;
            height: 14px;
            background-position: inherit;
        }

        .closeable {
            background: theme-image($theme, 'btn_taskbar_cap_sprite.png') no-repeat 0 0;
        }
    }

    .#{$prefix}btn-pressed {
        @include single-box-shadow($font-color, 0, 0, 2px);
        background: theme-image($theme, 'btn_taskbar_cap_left_active.png') no-repeat 0 0;

        em {
            background: theme-image($theme, 'btn_taskbar_cap_right_active.png') no-repeat right 0;
        }

        button {
             background: theme-image($theme, 'btn_taskbar_cap_mid_active.png') repeat-x 0 0;
        }

        .#{$prefix}btn-inner {
            color: #fff;
            text-shadow: 1px 1px 0px $dark-blue;
        }

        .closeable { background-position: 0 bottom }
    }
    .#{$prefix}btn-pressed.#{$prefix}btn-over {
    	@include single-box-shadow($light-blue, 0, 0, 4px);
    }
}

/**
 * ------------------------
 * DEFAULT TOOLBAR BUTTONS
 * ------------------------
 */
.#{$prefix}toolbar-docked-bottom {

	/** Toolbar button style - Normal state */
	.#{$prefix}btn {
		border-color: transparent;
		padding: 2px;
	}
	
	/** Separator */
	.#{$prefix}toolbar-separator {
		border-left-color: #AEB7BD;
		border-right-color: #fff;
	}
}

/**
 * ------------------------
 * SHOPWARE TOOLBAR BUTTONS
 * ------------------------
 */
.#{$prefix}toolbar-shopware-ui {

	/** Toolbar button style - Normal state */
	.#{$prefix}btn {
		@include border-radius(2px);
		@include single-transition(background, 0.25s, ease-out);
		padding: 2px 6px 2px 10px;
		border-color: #9cb1c8;
		background: url("") repeat-x;
		
		button, a {
			height: 23px;
			overflow: visible;
		}
		
		// Button text
		.#{$prefix}btn-inner {
			color: $font-color;
			text-shadow: 0 1px 0 #fff;
			font-weight: normal;
			font-size: 11px;
		}
	
		// Button icon
		.#{$prefix}btn-icon {
			top: 3px;
			left: -1px;
		}
	}
	
	/** Toolbar button style - Hover state */
	.#{$prefix}btn-over {
		border-color: #8bb0d8;
		background: url("") repeat-x;
	}
	
	/** Toolbar button style - Disabled state */
	.#{$prefix}btn-disabled {
		@include opacity(0.5);
		
		.#{$prefix}btn-inner {
			color: darken($font-color, 50%) !important;
		}
	}
}

/**
 * Shopware Normal Buttons states
 * -----------------------------------------------------------------------
 */
@mixin shopware-button {

	/**
	 * ------------------------
	 * SHOPWARE BUTTON SET
	 * ------------------------
	 */

	/** Secondary button style - Normal state */
	.#{$prefix}btn.secondary {
		@include box-shadow(0 1px 4px #999, #b4c0cb -1px 0 0px 0 inset, #b4c0cb 1px 0 0px 0 inset);
		@include single-transition(background, 0.25s, ease-out);
		margin: 0 5px;
		padding: 2px 25px;
		border-color: #647589;
		background: url("") repeat-x;
		
		button, a {
			height: 24px;
		}
		
		.#{$prefix}btn-inner {
			@include user-select(none);
			color: #fff;
			font-weight: bold;
			text-shadow: 0 1px 0 #3F505D;
			font-size: 12px;
			margin: 0 !important; /** Align the button text in FF */
		}
	}
	
	/** Secondary button style - Disabled state */
	.#{$prefix}btn-disabled.secondary {
		@include opacity(0.65);
		background: url("") repeat-x;
		
		.#{$prefix}btn-inner {
			color: #fff !important;
		}
	}
	
	/** Secondary button style - Hover state */
	.#{$prefix}btn-over.secondary {
		border-color: #7189a6;
		background: url("") repeat-x;
	}
	
	/** Primary button style - Normal state */
	.#{$prefix}btn.primary {
		@include box-shadow(0 1px 4px #888, #2daff3 -1px 0 0px 0 inset, #2daff3 1px 0 0px 0 inset);
		@include single-transition(background, 0.25s, ease-out);
		margin: 0 5px;
		padding: 2px 25px;
		border-color: #1068e5;
		background: url("") repeat-x;
		
		button, a {
			height: 24px;
		}
		
		.#{$prefix}btn-inner {
			@include user-select(none);
			color: #fff;
			font-weight: bold;
			font-size: 12px;
			margin: 0 !important; /** Align the button text in FF */
			text-shadow: 0 1px 0 #0B489D;
		}
	}
	
	/** Primary button style - Hover and disabled state. Based on the secondary button style */
	.#{$prefix}btn-over.primary, .#{$prefix}btn-disabled.primary {
		border-color: #0b85f5;
		background: url("") repeat-x;
	} 
	
	/** Primary button style - Disabled state. */
	.#{$prefix}btn-disabled.primary {
		@include opacity(0.65);
		
		.#{$prefix}btn-inner {
			color: #fff !important;
		}
	}
	
	/** Small secondary button style - Normal state */
	.#{$prefix}btn.small {
		@include box-shadow(0 1px 2px #bbb, #dee7ec -1px 0 0px 0 inset, #dee7ec 1px 0 0px 0 inset);
		@include single-transition(background, 0.25s, ease-out);
		border-color: #a2b1c3;
		margin: 0 5px 0 0;
		padding: 2px 6px;
        background: url("") repeat-x;

		button, a {
			height: 16px;
		}
		
		.#{$prefix}btn-inner {
			color: $font-color;
			text-shadow: 0 1px 0 #fff;
			font-weight: normal;
            font-size: 11px;
		}
	}
    .#{$prefix}btn.small:last-child {
        margin: 0
    }
	
	/** Small secondary button style - Hover and disabled state */
	.#{$prefix}btn-over.small, .#{$prefix}btn-disabled.small {
        background: url("") repeat-x;
	}
	
	
	/** Small primary button style - Normal state */
	.#{$prefix}btn.small.primary {
		@include box-shadow(0 1px 2px #888, #2daff3 -1px 0 0px 0 inset, #2daff3 1px 0 0px 0 inset);
		border-color: #1068e5;
		background: url("") repeat-x;
		
		.#{$prefix}btn-inner {
			@include user-select(none);
			color: #fff;
			font-weight: normal;
            font-size: 11px;
			margin: 0 !important; /** Align the button text in FF */
			text-shadow: 0 1px 0 #0B489D;
		}
	}
	
	/** Small primary button style - Hover state */
	.#{$prefix}btn-over.small.primary, .#{$prefix}btn-disabled.small.primary {
		background: url("") repeat-x;
	}
}

/**
 * ------------------------
 * SHOPWARE BOTTOM TOOLBAR BUTTONS
 * ------------------------
 */
.#{$prefix}toolbar-shopware-ui-docked-bottom {
	@include shopware-button;
	
	.#{$prefix}btn {
		padding: 0 25px !important;
		height: 28px !important;
	}
}